<template>
    <el-popover
      v-model="isShow"
      width="416"
      ref="myPopover"
      :popper-class="popperClass"
      placement="bottom-start"
      transition="el-zoom-in-top"
      :visible-arrow="false"
      trigger="click">
      <el-input  slot="reference" :style="{ width: width + 'px' }" 
      :placeholder="placeholder"  ref="input"  :readonly="isReadonly"  
      style="cursor:pointer" v-model="text">
            <i slot="suffix" class="el-select__caret el-input__icon el-icon-arrow-up" 
            :class="{ 'is-reverse' : isShow}"></i>
      </el-input>
      <div class="content" :style="{'max-height':maxHeight+'px', 'overflow-y':'auto'}">
      <div class="content__checkbox" v-if="showCheckbox">
         <main-checkbox-group 
         @change="change"
         :dataGrid="dataGrid" 
         :checkedKeys="checkedKeys" />
      </div>
      <div class="content__radio" v-else>
         <main-radio-group 
         @change="change"
         :dataGrid="dataGrid" 
         :checkedKeys="checkedKeys"/>
      </div>
      </div>
    </el-popover>
</template>
<script>
import MainCheckboxGroup from './checkbox-group';
import MainRadioGroup from './radio-group';
export default {
  props: {
    width: Number,
    showCheckbox: Boolean,
    filterable: Boolean,
    dataGrid: Array,
    checkedKeys: Array // 默认选中
  },
  components: {
    MainCheckboxGroup,
    MainRadioGroup
  },
  data() {
    return {
      isShow: false,
      maxHeight: 200,
      placeholder: '请选择因子',
      checkedList: []// 选中的checkbox

    };
  },
  computed: {
    isReadonly() {
      return !this.filterable;
    },
    text() {
      const checkedList = this.checkedList;
      const len = checkedList.length;
      if (len === 0) {
        return '';
      } else if (len === 1) {
        return checkedList[0].pollutename;
      } else {
        return `因子(${len})`;
      }
    },
    layoutSkin: {
      get() { return this.$store.state.common.layoutSkin; }
    },
    popperClass() {
      if (this.layoutSkin === 'dark') {
        return 'pollute-panel-popover pollute-panel-popover--dark';
      } else {
        return 'pollute-panel-popover';
      }
    }
  },
  methods: {
    change(val) {
      if (this.showCheckbox) {
        this.checkedList = val;
      } else {
        this.checkedList = [val];
      }
      this.$emit('change', val);
    },
    focus() {
      console.log(`focus`);
      this.isShow = true;
    }
  }
};
</script>

<style lang="scss" scoped="">
@import '~@/assets/scss/variables';
  .el-select__caret {
    color: #c0c4cc;
    font-size: 14px;
    transition: transform .3s;
    transform: rotate(180deg);
    cursor: pointer;
  }
  .el-select__caret.is-reverse {
    transform: rotate(0deg);
  }
  .pollute-panel-popover{
      .content{

      }

      &--dark{

      }
  }
</style>
